<template>
	<div class="form equipInterface" style="height:100%;">
		<el-form label-width="120px" :inline="false" :model="form" :rules="rules" ref="portAddForm" class="form">
			<el-row>
				<el-col :span="12">
					<el-form-item label="脚本文件">
						<el-tag style="" class="fileTag" @click="downLoad">{{fileName}}</el-tag>
					</el-form-item>

				</el-col>
				<el-col :span="12">
					<el-form-item label="类型" prop="interfaceType">
						<el-select v-model="form.interfaceType" placeholder="请选择" size="mini" style="width:100%;" disabled>
							<el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
						<!--<el-input size="mini" v-model="form.interfaceType" placeholder="请输入"></el-input>-->

					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="工作站" prop="workstationFilePath">
						<el-input size="mini" v-model="form.workstationFilePath" placeholder="请输入工作站文件路径" disabled></el-input>
					</el-form-item>

				</el-col>
				<el-col :span="12">
					<el-form-item label="文件地址" prop="fileServerAddress">
						<el-input size="mini" v-model="form.fileServerAddress" placeholder="请输入文件服务器地址" disabled></el-input>
					</el-form-item>
					<!--<el-form-item label="接口:" prop="interFace">
						<el-input size="mini" v-model="form.interFace" placeholder="请输入接口"></el-input>
					</el-form-item>-->
				</el-col>

			</el-row>
			<el-row>
				<el-col :span="12">

				</el-col>
				<el-col :span="12">
					<el-form-item label="存放地址" prop="serverStoragePath">
						<el-input size="mini" v-model="form.serverStoragePath" placeholder="请输入服务器存放路径" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="备份地址:" prop="serverBackupPath">
						<el-input size="mini" v-model="form.serverBackupPath" placeholder="请输入服务器备份路径" disabled></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div class="anaTable">
			<div style="height:40px;line-height:40px;">
				分析项
			</div>
			<el-table :data="analysisBeanList" style="width: 100%;height:calc(100% - 40px)" class="tableCon" size="mini" key="analysisBeanList">
				<el-table-column label="序号" min-width="50px">
					<template slot-scope="scope">
						{{scope.$index+1}}
					</template>
				</el-table-column>
				<el-table-column property="reportWord" label="报告中名称" min-width="100px">
				</el-table-column>
				<el-table-column property="name" label="系统中名称" min-width="100px">
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	export default {
		props: { portData: Object },
		data() {
			return {
				form: {
					equipment: '',
					interfaceType: "",
					workstationFilePath: '',
					fileServerAddress: '',
					serverStoragePath: '',
					serverBackupPath: '',
					interFace: '',
				},
				rules: {
					name: [{ required: true, type: 'string', message: '请选择', trigger: 'blur' },],
				},
				analysisBeanList: [],
				fileName: "",
				typeOption: [{
					value: "PDF",
					label: "pdf文件"
				}, {
					value: "EXCEL",
					label: "excel文件"
				}],
				javaScriptPath: null,
			}
		},
		computed: {
			tabDivHeight() {
				return (window.innerHeight - 460)
			}
		},
		mounted() {
			this.form.equipment = this.portData.id
			this.init()
		},
		methods: {
			init() {
				this.$http({
					apiUrl: 'resource/readEquipmentInterface.htm',
					method: 'get',
					params: { id: this.portData.id },
				}).then(res => {
					if (res.code == 0) {
						if (res.data) {
							if (res.data.equipmentInterfaceBean != undefined) {
								this.form.interfaceType = res.data.equipmentInterfaceBean.interfaceType
								this.form.workstationFilePath = res.data.equipmentInterfaceBean.workstationFilePath
								this.form.fileServerAddress = res.data.equipmentInterfaceBean.fileServerAddress
								this.form.serverStoragePath = res.data.equipmentInterfaceBean.serverStoragePath
								this.form.serverBackupPath = res.data.equipmentInterfaceBean.serverBackupPath
								this.javaScriptPath = res.data.equipmentInterfaceBean.javaScriptPath
								var str = res.data.equipmentInterfaceBean.javaScriptPath
								var index = str.lastIndexOf("/");
								str = str.substring(index + 1, str.length);
								this.fileName = str;
							}
							this.form.interFace = res.data.interFace
							this.analysisBeanList = res.data.analysisBeanList
						}
					}
				})
			},
			downLoad() {
				if (this.javaScriptPath != null) {
					var url = "download/linuxDownload.htm"
          let token = sessionStorage.getItem('loginAccount')?sessionStorage.getItem('loginAccount'):undefined
					window.open(process.env.baseUrl + url + '?path=' + this.javaScriptPath + "&token=" + token);
				}
			},
			submit() {
				this.$refs.portAddForm.validate((valid) => {
					if (valid) {
						this.$http({
							apiUrl: 'resource/addEquipInterface.htm',
							method: 'post',
							params: this.form,
						}).then(res => {
							if (res.code == 0) {
								this.$parent.close()
							}
						})
					} else {
						return false
					}
				})
			}
		}
	}

</script>

<style>
	.equipInterface .fileTag {
		width: 100%;
		height: 28px;
		line-height: 28px;
		padding: 0 5px;
		position: relative;
		float: left;
		margin-top: 6px;
		border: 1px solid #E4E7ED;
		cursor: pointer;
		background: #F5F7FA;
	}

	.equipInterface .form {
		height: 180px;
	}

	.equipInterface .anaTable {
		height: calc(100% - 180px)
	}
</style>